<template>
  <view class="modal" v-if="visible" @click="handleOutsideClick">
    <view class="modal-content" @click.stop>
      <view class="modal-header">编辑房间</view>
      <view class="modal-body">
        <view class="input-group">
          <view class="input-label">房间名称 :</view>
          <input class="input-field" type="text" v-model="roomName" placeholder="请输入房间名称" />
        </view>
        <view class="input-group">
          <view class="input-label">房间图片 :</view>
          <view class="picker" @click="showImagePicker = true">
            <image v-if="roomPic" :src="roomPicMap[roomPic]" class="room-pic" />
            <view v-else class="input-field2">请选择房间图片</view>
          </view>
        </view>
      </view>
      <view class="modal-footer">
        <button class="btn" @click="handleCancel">取消</button>
        <button class="btn btn-primary" @click="handleConfirm">确定</button>
      </view>
    </view>

    <view class="image-picker-modal" v-if="showImagePicker">
      <view class="image-picker-content">
        <view class="image-option" v-for="(src, key) in roomPicMap" :key="key" @click="selectImage(key)">
          <image :src="src" class="image-option-pic" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    room: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      roomName: '',
       roomPic: '',
      showImagePicker: false,
      roomPicMap: {
        blue: '../../static/images/room/roomblue.png',
        bp: '../../static/images/room/roombp.png',
        green: '../../static/images/room/roomgreen.png',
        purple: '../../static/images/room/roompurple.png',
        red: '../../static/images/room/roomred.png',
        yellow: '../../static/images/room/roomyellow.png'
      }
    };
  },
    created() {
      if (this.room) {
        this.roomName = this.room.roomName || '';
        this.roomPic = this.room.roomPic || '';
      }
    },
  watch: {
    room(newRoom) {
      this.roomName = newRoom ? newRoom.roomName : '';
      this.roomPic = newRoom ? newRoom.roomPic : '';
    }
  },
  methods: {
    handleCancel() {
      this.$emit('close');
    },
    handleConfirm() {
      if (!this.roomName || !this.roomPic) {
        uni.showToast({
          title: '请填写所有必填项',
          icon: 'none'
        });
        return;
      }
      const updatedRoom = {
        ...this.room,
        roomName: this.roomName,
        roomPic: this.roomPic
      };
      this.$emit('confirm', updatedRoom);
    },
    selectImage(pic) {
      this.roomPic = pic;
      this.showImagePicker = false;
    },
    handleOutsideClick() {
      this.showImagePicker = false;
    }
  }
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 70%;
  max-width: 300px;

}

.modal-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left:80px ;
}

.modal-body {
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-label {
  margin-bottom: 5px;
  
}

.input-field{
	width: 90%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 3px;
	height: 93rpx;
}
.input-field2 {
  width: 80%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.picker {
  cursor: pointer;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 11rpx;
}

.room-pic {
  width: 60px;
  height: 60px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
}

.btn {
  padding: 3px 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 45rpx;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.image-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-picker-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-option {
  margin: 5px;
}

.image-option-pic {
  width: 60px;
  height: 60px;
  cursor: pointer;
}
</style>
